<template>
	<view class="mask" @tap="cancel">
		<view class="mask-content  animated bounceInUp" @tap.stop>
			<text class="new-iconfont icon-close close-btn" @tap="cancel"></text>
			<view class="title">
				切换房间
			</view>
			
			<scroll-view scroll-y class="scroll-view" @scrolltolower="fetchList">
				<view class="list-scope">
					<view v-for="(item, index) in list" hover-class="hover" class="item-scope" @tap="selectRoom(item)">
						
						<view class='stock' :class="{empty: item.stock === 0}">剩{{item.stock}}发</view>
						
						<view class="left">
							<image class="box-icon" mode="widthFix" src="http://cdn2.hquesoft.com/box/yfs/box-icon.png" />
							<view class="title" :class="{'small-font': item.num >= 99}">第{{item.num}}箱</view>
						</view>
						<view class='right'>
							<view class="shang-row">
								<view v-for="shang in item.normal_skus" class="shang-item">
									<text class="title">{{shang.shang_title}}</text> {{shang.stock}}/{{shang.total}}
								</view>
							</view>
							<view class="shang-row">
								<view v-for="shang in item.gift_skus" class="shang-item">
									<text class="title">{{shang.shang_title}}</text> {{shang.stock}}/{{shang.total}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isInit: false,
				list: [],
				page: 1,
				perPage: 20
			}
		},
		props: {
			info: {
				type: Object
			},
			room: {
				type: Object
			}
		},
		computed: {
		},
		watch: {
			payTotal () {
				this.initOrder()
			}
		},
		created() {
			this.initData()
		},
		methods: {
			initData() {
				uni.showLoading({
					title: '加载中'
				})
				
				this.fetchList().then(res => {
					uni.hideLoading()
				})
			},
			fetchList () {
				if (this.isLoading)
					return false 
					
				this.isLoading = true
				
				return this.$http(`/yifanshang/${this.info.uuid}/rooms`, 'GET', {
					page: this.page,
					per_page: this.perPage
				}).then(res => {
					this.isInit = true
					this.list = this.list.concat(res.data.list)
					this.isLoading = false
					this.page++
				}).catch(err => {
					this.isInit = false
				})
			},
			selectRoom(item) {
				this.$emit('select', item)
			},
			cancel () {
				this.$emit('close')
			}
		},
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	.small-text {
		// font-size: 80%;
	}

	.mask-content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 1200rpx;
		background-color: #EDEDED;
		background-color: white;
		border-radius: 10rpx 10rpx 0 0;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// animation: show 0.8s;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.close-btn {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
		}
	}
	
	.scroll-view {
		height: 1100rpx;
	}
	
	
	.list-scope {
		padding: 30rpx 10rpx;
	
		.item-scope {
			display: flex;
			// padding: 10rpx 0rpx;
			border-bottom: 1rpx solid #F1F1F1;
			position: relative;
			
			border: 2px solid black;
			margin-bottom: 10rpx;
			
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			
			.stock {
				position: absolute;
				right: 10rpx;
				top: 6rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #F7AF09;
			}
			
			.left {
				// margin-right: 30rpx;
				width: 90rpx;
				flex: 0 0 90rpx;
				text-align: center;
				.box-icon {
					width: 80rpx;
					height: 80rpx;
					color: red;
					font-size: 60rpx;
					text-align: center;
				}
				.title {
					font-size: 28rpx;
					font-weight: 500;
					
					&.small-font {
						font-size: 24rpx;
					}
				}
			}
			.right {
				.shang-row {
					display: flex;
					flex-wrap: wrap;
				}
				.shang-item {
					margin-left: 30rpx;
					font-weight: 500;
					font-size: 26rpx;
					.title {
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}
			
		}
	}
	
</style>
